<template>
  <div class="company-container">
    <van-sticky>
      <div class="top-box">
        <span>公司</span>
        <!-- 搜索 -->
        <div class="search-box">
          <van-search
            v-model="q"
            shape="round"
            placeholder="请输入搜索关键词"
            @search="search"
          />
        </div>
      </div>
      <!-- 图片 -->
      <div v-if="!showPop" class="banner-box">
        <img src="../../assets/ios3x_img_banner@3x.png" alt="" />
      </div>
      <!-- 筛选区域 -->
      <div class="filter-box">
        <span
          @click="suggestFilter"
          :class="{ actived: !distance && !score }"
          class="recommend"
          >推荐</span
        >
        <span @click="distanceFilter()" class="distance">
          距离
          <span class="arrow-box">
            <i
              class="iconfont rotate iconicon_xuanze_sel"
              :class="{ actived: distance === 'asc' }"
            ></i>
            <i
              class="iconfont  iconicon_xuanze_sel"
              :class="{ actived: distance === 'desc' }"
            ></i>
          </span>
        </span>
        <span @click="scoreFilter" class="grade"
          >评分
          <span class="arrow-box">
            <i
              class="iconfont  rotate iconicon_xuanze_sel"
              :class="{ actived: score === 'asc' }"
            ></i>
            <i
              class="iconfont  iconicon_xuanze_sel"
              :class="{ actived: score === 'desc' }"
            ></i> </span
        ></span>
        <span
          class="filter"
          :class="{ actived: showPop }"
          @click="showPop = true"
          >筛选</span
        >
      </div>
    </van-sticky>
    <!-- 主体区域 -->
    <div class="main-box">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 列表项 -->
        <mm-company-item
          v-for="item in list"
          :key="item.id"
          :item="item"
          @click-item="clickItem"
        />
      </van-list>
    </div>
    <!-- 弹出层 -->
    <van-popup
      transition="fade"
      v-model="showPop"
      position="top"
      :style="{ height: '70%' }"
      class="company-pop"
    >
      <div class="section">
        <h2>距离</h2>
        <div class="items">
          <div
            @click="distanceFilter('desc')"
            class="item"
            :class="{ actived: distance === 'desc' }"
          >
            由远及近
          </div>
          <div
            @click="distanceFilter('asc')"
            class="item"
            :class="{ actived: distance === 'asc' }"
          >
            由近及远
          </div>
        </div>
      </div>
      <div class="section">
        <h2>评分</h2>
        <div class="items">
          <div
            class="item"
            v-for="(item, index) in scoreList"
            :key="index"
            @click="setScoreRange(index)"
            :class="{ actived: scoreIndex === index }"
          >
            {{ item }}
          </div>
          <!-- <div class="item">3分-3.9分</div> -->
          <!-- </div> -->
          <!-- <div class="items"> -->
          <!-- <div class="item">2分-2.9分</div> -->
          <!-- <div class="item">1分-1.9分</div> -->
          <!-- </div> -->
          <!-- <div class="items"> -->
          <!-- <div class="item">1分以下</div> -->
        </div>
      </div>
      <div class="control-box van-hairline--top">
        <van-button @click="clearFilter" class="clear-btn" type="default"
          >清除</van-button
        >
        <van-button class="confirm-btn" type="primary" @click="showPop = false"
          >确认</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
// 导入接口
import { companyList } from '../../api/api'
// 导入组件
import indexItem from './indexItem'
export default {
  name: 'company',
  // 注册组件
  components: {
    [indexItem.name]: indexItem
  },

  methods: {
    // 顶部搜索
    search (v) {
      // console.log(this.q)
      this.start = 0
      this.list = []
      this.finished = false
      this.getList()
    },
    // 获取数据
    async getList () {
      this.loading = true
      // 计算索引值
      // 获取数据
      const listRes = await companyList({
        start: this.start,
        limit: this.limit,
        distance: this.distance,
        score: this.score,
        q: this.q,
        scoreRange: this.scoreRange
      })
      // 保存列表数据
      this.list.push(
        ...listRes.data.list.map(v => {
          v.logo = process.env.VUE_APP_URL + v.logo
          return v
        })
      )
      // 保存总条数
      this.total = listRes.data.total
      // 禁用加载
      this.loading = false
      this.start += this.limit
      if (this.start >= this.total) {
        this.finished = true
      }
    },
    // list组件加载数据
    onLoad () {
      // 计算页码
      this.getList()
    },
    // 元素的点击事件
    clickItem (id) {
      // 去详情页
      this.$router.push(`/companyDetail/${id}`)
    },
    distanceFilter (type) {
      if (this.loading) return
      if (type) {
        this.distance = type
      } else {
        if (this.distance === 'asc') {
          this.distance = 'desc'
        } else {
          this.distance = 'asc'
        }
      }
      this.start = 0
      this.list = []
      this.finished = false
      this.getList()
    },
    scoreFilter () {
      if (this.loading) return
      if (this.score === 'asc') {
        this.score = 'desc'
      } else {
        this.score = 'asc'
      }
      this.start = 0
      this.list = []
      this.finished = false
      this.getList()
    },
    suggestFilter () {
      if (this.loading) return
      this.distance = undefined
      this.score = undefined
      this.start = 0
      this.list = []
      this.finished = false
      this.getList()
    },
    // 清除筛选
    clearFilter () {
      this.q = ''
      this.scoreIndex = -1
      this.scoreRange = ''
      this.suggestFilter()
      this.showPop = false
    },
    // 范为评分
    setScoreRange (index) {
      this.scoreIndex = index
      const item = this.scoreList[index]
      console.log(item)
      if (item !== '1分以下') {
        this.scoreRange = item.replace(/分/g, '')
      } else {
        this.scoreRange = '0-1'
      }
      this.list = []
      this.finished = false
      this.getList()
    }
  },

  data () {
    return {
      showPop: false,
      // 起始索引
      start: 1,
      // 限制
      limit: 5,
      // 列表数据
      list: [],
      // 是否正在加载数据
      loading: false,
      finished: false,
      // 排序条件
      distance: undefined,
      score: undefined,
      // 查询关键字
      q: '',
      // 总数据量
      total: 0,
      // 分值索引
      scoreIndex: -1,
      // 索引值
      scoreList: ['4分-5分', '3分-4分', '2分-3分', '1分-2分', '1分以下'],
      // 分值范为
      scoreRange: ''
    }
  }
}
</script>

<style lang="less">
.company-container {
  background-color: #fff;
  .top-box {
    padding: 18px 15px;
    display: flex;
    align-items: center;
    background-color: white;
    span {
      font-size: 18px;
      font-weight: 600;
      margin-right: 19px;
    }
  }
  .search-box {
    width: 345px;
    flex: 1;
    margin: 0 auto;
    height: 34px;
    font-size: 14px;
    color: #b3b3b3;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      font-size: 19px;
    }
    .van-search {
      width: 100%;
    }
  }
  .banner-box {
    padding: 0px 15px 10px;
    background-color: #fff;
    img {
      width: 100%;
    }
  }
  .filter-box {
    padding: 10px 15px 0;
    display: flex;
    align-items: center;
    background-color: white;
    > span {
      font-size: 14px;
      margin-right: 40px;
      font-weight: normal;
      display: flex;
      align-items: center;
      line-height: 20px;
      letter-spacing: 0px;
      i {
        font-size: 15px;
        color: #b4b4bc;
      }
    }
    .arrow-box {
      display: flex;
      flex-direction: column;
      i {
        line-height: 9px;
      }
      .rotate {
        transform: rotate(180deg);
      }
      :not(.rotate) {
        margin-top: 2px;
      }
    }
    .filter {
      flex: 1;
      justify-content: flex-end;
      margin: 0;
    }
    // 高亮效果
    .actived {
      color: #e40137;
    }
  }
  .main-box {
    padding: 0 15px;
  }
  // 弹出层
  .van-overlay {
    top: 100px;
  }
  .van-popup {
    top: 100px;
  }
  // 动画
  // transition切换的效果 淡入 淡出
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.2s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  // 弹出层
  .company-pop {
    .section {
      padding: 11px 15px 18px;
      h2 {
        font-size: 18px;
        margin-bottom: 18px;
      }
      .items {
        margin-bottom: 9px;
        display: flex;
        flex-wrap: wrap;
      }
      .item {
        width: 165px;
        height: 32px;
        background: #f9f8f8;
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        line-height: 32px;
        margin-bottom: 10px;
        &:first-child {
          // margin-right: 15px;
        }
        &.actived {
          color: #e40137;
        }
      }
      .item:nth-child(2n + 1) {
        margin-right: 15px;
      }
    }
  }
  // 按钮盒子
  .control-box {
    display: flex;
    padding: 15px;
    .van-button {
      border-color: transparent;
    }
    .clear-btn {
      width: 125px;
      height: 50px;
      background: #ffe2e9;
      border-radius: 7px;
      margin-right: 10px;
      font-size: 16px;
      color: #e40137;
    }
    .confirm-btn {
      flex: 1;
      height: 50px;
      background: #e40137;
      border-radius: 7px;
    }
  }
}
</style>
